<template>
  <div class="flex align-center justify-between px-16 page-head" :style="style">
    <img width="16" :src="goBackIcon" @click="back" />
    <div class="text-14 text-bold text-222">{{ title }}</div>
    <div class="slot" @click="more">
      <slot>
        <img v-if="showMore" :src="morePng" width="24" />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import backPng from '@/assets/images/back.png';
  import { CSSProperties, computed } from 'vue';
  import morePng from '@/assets/images/more.png';

  const emit = defineEmits(['back', 'more']);
  const props = withDefaults(
    defineProps<{
      title?: string;
      background?: string;
      borderBottom?: boolean;
      showMore?: boolean;
      goBackIcon?: string;
    }>(),
    {
      background: 'var(--background-color)',
      borderBottom: true,
      showMore: true,
      goBackIcon: backPng,
    }
  );
  const back = () => {
    emit('back');
  };
  const more = () => {
    emit('more');
  };

  const style = computed((): CSSProperties => {
    return {
      borderBottom: props.borderBottom ? '1px solid var(--border-color)' : '',
      background: props.background,
    };
  });
</script>

<style lang="scss" scoped>
  .page-head {
    height: var(--head-height);
    min-height: var(--head-height);
    position: sticky;
    z-index: 10;
    top: 0;
    .slot {
      min-width: 24px;
      height: 24px;
    }
  }
</style>
